<template>
  <div class="vertical-align-flex">
    <div class="field">{{item.label}}：</div>
    <div class="value" v-if="item.type=='switch'">
      <div :class="['switch', {'switch-off': false}] "></div>
    </div>
    <div class="value" v-if="item.type=='input'">
      <input :class="['input-none', 'bottom-line', {'text-center': item.center}]">
      <span class="add" v-if="item.operate">{{item.operate}}</span>
    </div>
    <div class="value" v-if="item.type=='select'">
      <el-select class="select-middle"></el-select>
    </div>
    <div class="value" v-if="item.type=='textarea'">
      <span class="textarea-tip">{{item.tip}}</span>
      <textarea class="text-area" name="" id="" cols="30" rows="10"></textarea>
    </div>
  </div>
</template>

<script>

  export default {
    props: {
      item: {
        type: Object,
        required: true,
        default: {
          type: 'input',
          center: false,
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
